<template>
	<view class="unt-divider-content">
		<view class="divider-left-line" :style="{borderColor:color,borderBottomStyle:dashed ? 'dashed' : 'solid'}"></view>
		<view class="divider-text">
			<slot></slot>
			<text class="divider-text-text">{{text}}</text>
		</view>
		<view class="divider-right-line" :style="{borderColor:color,borderBottomStyle:dashed ? 'dashed' : 'solid'}"></view>
	</view>
</template>

<script>
	import props from "./props.js"
	export default {
		mixins: [props]
	}
</script>

<style lang="scss" scoped>
	.unt-divider-content {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0rpx 100rpx;

		.divider-left-line {
			width: 100%;
			border-bottom: 2rpx solid;
		}

		.divider-text {
			flex-shrink: 0;
			padding: 0rpx 30rpx;
			font-size: 28rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.divider-right-line {
			width: 100%;
			border-bottom: 2rpx solid;
		}
	}
</style>
